<template>
  <div class="mine">
    <div class="mine">
      <div class="mineMSG">
        <div class="mineMSG-i" @click="showDialog">
          <van-icon
            name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
            size="15"
          /><img :src="data.profile.avatarUrl" alt="" />
          <span>{{ data.profile.nickname }}</span>
          <span class="lv">lv.{{ data.level }}</span>
          <p>累计听歌:{{ data.listenSongs }}</p>
        </div>
        <van-dialog v-model="show" title="修改个人信息" show-cancel-button>
          <van-field v-model="gender" label="性别" />
          <van-field v-model="birthday" label="生日" />
          <van-field v-model="nickname" label="昵称" />
          <van-field v-model="province" label="地区" />
          <van-field v-model="city" label="城市" />
          <van-field v-model="signature" label="个人签名" />
          <van-button type="primary" @click="changeUser" block>修改</van-button>
        </van-dialog>
        <div></div>
      </div>

      <!-- <van-cell
      title="单元格"
      value="内容"
      label="描述信息"
      icon="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
    /> -->

      <van-grid :column-num="4">
        <van-grid-item icon="music-o" text="本地/下载" color="red" />
        <van-grid-item icon="upgrade" text="云盘" />
        <van-grid-item icon="sign" text="已购" />
        <van-grid-item icon="play-circle-o" text="最近播放" />
        <van-grid-item icon="friends-o" text="我的好友" />
        <van-grid-item icon="star-o" text="收藏和赞" />
        <van-grid-item icon="bullhorn-o" text="电音专区" />
        <van-grid-item icon="service-o" text="DJ专区" />
      </van-grid>

      <div class="songbox">
        <p>推荐歌单<van-icon name="replay" color="red" /></p>
        <div class="songlist">
          <div class="songimgbox" v-for="item in playlist" :key="item.id">
            <div class="songtag">
              <img
                :src="item.coverImgUrl"
                :title="item.name"
                @click="detail(item.id)"
              />
            </div>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { playlistAPI, userDetailAPI, changeUserAPI } from "../../api/mine";
export default {
  data() {
    return {
      playlist: [],
      userlist: [],
      level: [],
      uid: "",
      data: "",
      show: false,
      gender: "",
      birthday: "",
      nickname: "",
      province: "",
      city: "",
      signature: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //调取修改弹窗
    showDialog() {
      this.show = true;
      this.gender = this.data.profile.gender;
      this.birthday = this.data.profile.birthday;
      this.nickname = this.data.profile.nickname;
      this.province = this.data.profile.province;
      this.city = this.data.profile.city;
      this.signature = this.data.profile.signature;
    },
    //修改个人信息
    async changeUser() {
      const gender = this.data.profile.gender;
      const birthday = this.data.profile.birthday;
      const nickname = this.data.profile.nickname;
      const province = this.data.profile.province;
      const city = this.data.profile.city;
      const signature = this.data.profile.signature;
      const result = await changeUserAPI(
        gender,
        birthday,
        nickname,
        province,
        city,
        signature
      );
      if (result.code === 200) {
        Toast({
          message: "更改成功",
        });
      }
      console.log(result);
    },
    //获取用户详情
    async userDetail() {
      const uid = localStorage.getItem("uid");
      const result = await userDetailAPI(uid);
      console.log(result);
      this.data = result.data;
    },
    async huoqu(params) {
      const result = await playlistAPI(params);
      console.log(result);
      this.playlist = result.data.playlists;
      console.log(this.playlist);
    },
    detail(id) {
      this.$router.push(`/listdetail/${id}`);
    },
  },
  created() {
    const params = { params: 10 };
    this.huoqu(params);
    this.userDetail();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.songimgbox {
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songlist {
  width: 100%;
  height: 140px;
  display: flex;
  overflow-x: scroll;

  /* overflow-x: visible; */
}
.songbox {
  height: 180px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #cccccc;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.songlist-webkit-scrollbar {
  width: 0;
}
.mineMSG {
  width: 100%;
  height: 200px;
}
.mineMSG-i img {
  width: 50px;
  height: 50px;
  border-radius: 10%;
}
.mineMSG-i .lv {
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid red;
}
</style>